<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
	var roleTree ;
	$(function() {
		roleTree = $('#role-ul').tree({
			data : JSON.parse('${role}'),
			parentField : 'pid',
			//lines : true,
			checkbox : true,
			onClick : function(node) {
			},
			onLoadSuccess : function(node, data) {
				parent.$.messager.progress('close');
			},
			cascadeCheck : false
		});

		$('#form').form({
			url : '/userController/butchGrant',
			onSubmit : function() {
				parent.$.messager.progress({
					title : '提示',
					text : '数据处理中，请稍后....'
				});
				var isValid = $(this).form('validate');
				if (!isValid) {
					parent.$.messager.progress('close');
				}
				
				//设置角色
				var roleNodes = $('#role-ul').tree('getChecked');
				var roleids = '';
				for(var i=0 ;i<roleNodes.length;i++){
					if(roleids != ''){
						roleids += ',';
					}
					roleids += roleNodes[i].id;
				}
				$("form input[name='roleIds']").val(roleids);
				return isValid;
			},
			success : function(result) {
				parent.$.messager.progress('close');
				result = $.parseJSON(result);
				if (result.success) {
					parent.$.modalDialog.openner_dataGrid.datagrid('reload');//之所以能在这里调用到parent.$.modalDialog.openner_dataGrid这个对象，是因为user.jsp页面预定义好了
					parent.$.modalDialog.handler.dialog('close');
					parent.$.modalDialog.openner_dataGrid.datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
				} else {
					parent.$.messager.alert('错误', result.msg, 'error');
				}
			}
		});
	});
	
	
	function checkAll() {
		var nodes = roleTree.tree('getChecked', 'unchecked');
		if (nodes && nodes.length > 0) {
			for ( var i = 0; i < nodes.length; i++) {
				roleTree.tree('check', nodes[i].target);
			}
		}
	}
	function uncheckAll() {
		var nodes = roleTree.tree('getChecked');
		if (nodes && nodes.length > 0) {
			for ( var i = 0; i < nodes.length; i++) {
				roleTree.tree('uncheck', nodes[i].target);
			}
		}
	}
	function checkInverse() {
		var unchecknodes = roleTree.tree('getChecked', 'unchecked');
		var checknodes = roleTree.tree('getChecked');
		if (unchecknodes && unchecknodes.length > 0) {
			for ( var i = 0; i < unchecknodes.length; i++) {
				roleTree.tree('check', unchecknodes[i].target);
			}
		}
		if (checknodes && checknodes.length > 0) {
			for ( var i = 0; i < checknodes.length; i++) {
				roleTree.tree('uncheck', checknodes[i].target);
			}
		}
	}
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'west'" title="系统角色" style="width: 300px; padding: 1px;">
		<div class="well well-small">
			<form id="form" method="post">
				<c:forEach items="${users }" var="user">
					<input name="ids" type="hidden" class="span2" value="${user.id}" readonly="readonly">
				</c:forEach>
				<ul id="role-ul"></ul>
				<input id="roleIds" name="roleIds" type="hidden"  />
			</form>
		</div>
	</div>
	<div data-options="region:'center'" title="" style="overflow: hidden; padding:5px;">
		<div class="well well-small">
			<c:forEach items="${users }" var="user">
			<span class="label label-success">${user.loginName}</span>
			</c:forEach>
		</div>
		<div class="well well-large">
			<button class="btn btn-success" onclick="checkAll();">全选</button>
			<br /> <br />
			<button class="btn btn-warning" onclick="checkInverse();">反选</button>
			<br /> <br />
			<button class="btn btn-inverse" onclick="uncheckAll();">取消</button>
		</div>
	</div>
</div>